@charset "utf-8";
$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}

.article_content{
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #fff;
    transform: translateX(-100%);
    transition: all .5s linear;
    z-index: 99;
    .content{
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        padding-top: r(40px);
        .top_menu_con{
            width: r(585px);
            margin: 0 auto;
            font-size: 0;
            h5{
                font-size: 16px;
            }
            .collect_browse{
                display: flex;
                justify-content: flex-end;
                p{
                    color: #C5C5C5;
                    font-size: 14px;
                    letter-spacing: em;
                    &:first-of-type{
                        margin-right: r(20px);
                        &::before{
                            content: "\e641";
                            margin-right: r(5px);
                        }
                    }
                    &:last-of-type{
                        &::before{
                            content: "\e660";
                            margin-right: r(5px);
                        }
                    }
                }
            }
            .time_way{
                display: flex;
                justify-content: flex-end;
                margin-bottom: r(35px);
                span{
                    font-size: 14px;
                    color: #C5C5C5;
                    line-height: r(28px);
                    margin-right: r(11px);
                }
                p{
                    font-size: 14px;
                    color: #b20000;
                    line-height: r(28px);
                }
            }
            .text_menu{
                font-size: 0;
                p{
                    line-height: r(28px);
                    text-indent: 2em;
                    font-size: 14px;
                    color: #C5C5C5;
                    margin-bottom: r(28px);
                }
                h6{
                    line-height: r(28px);
                    text-indent: 2em;
                    font-size: 15px;
                    color: #1d1d1d;
                    font-weight: bolder;
                    margin-bottom: r(28px);
                }
                .img_wrap_menu{
                    width: r(585px);
                    margin: 0 auto;
                    margin-top: r(-10px);
                    margin-bottom: r(28px);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .none_sty{
                    margin-bottom:0;
                }
                .dingge{
                    text-indent: 0;
                }
            }
        }
        .segment_line{
            height: r(25px);
            width: 100%;
            background: #f5f5f5;
        }
        .previous_page{
            width: r(585px);
            margin: 0 auto;
            font-size: 16px;
            color: #727171;
            padding: r(28px) 0;
            p{
                font-weight: bolder;
                
            }
            span{
                font-size: 14px;
                
            }
        }
        .down_menu{
            width: r(585px);
            margin: 0 auto;
            padding-top: r(38px);
            .interaction{
                display: flex;
                justify-content: space-around;
                width: r(328px);
                margin: 0 auto r(45px) auto;
                .tags{
                    height: r(100px);
                    width: r(68px);
                    text-align: center;
                    .tags_w{
                        width: r(68px);
                        height: r(68px);
                        line-height: r(58px);
                        text-align: center;
                        border: r(2px) solid #8b8b8b;
                        border-radius: 50%;
                        .iconfont{
                            color: #C5C5C5;
                            font-size: 24px;
                        }
                    }
                    p{
                        font-size: 14px;
                    }
                }
            }
            .interaction_2{
                position: relative;
                margin-bottom: r(45px);
                p{
                    font-size: 14px;
                    color: #b20000;
                    text-decoration: underline;
                    position: absolute;
                    left: 37%;
                    top: 40%;
                }
                span{
                    font-size: 14px;
                    color: #8b8b8b;
                    position: absolute;
                    left: 46%;
                    top: 40%;
                }
                .text_menu_area{
                    height: r(191px);
                    width: 100%;
                    resize: none;
                    border: 1px solid #cecece;
                    margin-bottom: r(16px);
                }
                .btn{
                    width: r(395px);
                    height: r(53px);
                    margin: 0 auto;
                    font-size: 16px;
                    color: #fff;
                    text-align: center;
                    line-height: r(52px);
                    background: #b20000;
                }
            }
            .interaction_3{
                p{
                    font-size: 12px;
                    color: #727171;
                }
                &>span{
                    text-decoration: underline;
                }
                .fir_cont{
                    font-size: 0;
                    margin-top: r(20px);
                    .head_portrait{
                        width: r(50px);
                        height: r(50px);
                        border-radius: 50%;
                        overflow: hidden;
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: r(10px);
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    &>p{
                        font-size: 12px;
                        display: inline-block;
                        vertical-align: middle;
                        color: #444444;
                        margin-right: r(8px);
                        margin-bottom: 0;
                    }
                    &>span{
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 12px;
                        color: #b2b2b2;
                    }
                }
                .sec_cont{
                    display: flex;
                    justify-content: space-around;
                    padding-top: r(10px);
                    &>p{
                        line-height: r(28px);
                        font-size: 12px;
                        margin: 0;
                        &:first-of-type{
                            color: #444444;
                        }
                    }
                }
                .thr_cont{
                    font-size: 0;
                    display: flex;
                    justify-content: flex-end;
                    p{
                        font-size: 12px;
                        color: #444444;
                        margin: 0;
                        span{
                            &:last-of-type{
                                color: #d1d1d1;
                            }
                        }
                    }
                }
                .unfold_box{
                    width: r(545px);
                    background: #fafafa;
                    font-size: 0;
                    padding:0 r(20px) r(10px) r(20px);
                    display: none;
                    ul{
                        li{
                            padding-bottom: r(10px);
                            border-bottom: r(1px) dashed #c9c9c9;
                            .message{
                                padding-top: r(19px);
                                .head_portrait_un{
                                    width: r(40px);
                                    height: r(40px);
                                    border-radius: 50%;
                                    overflow: hidden;
                                    margin-right: r(10px);
                                    display: inline-block;
                                    vertical-align: middle;
                                    img{
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                                p{
                                    color:#444444;
                                    font-size: 12px;
                                    margin-bottom: 0;
                                    
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                                span{
                                    display: inline-block;
                                    vertical-align: middle;
                                    font-size: 12px;
                                    line-height: r(24px);
                                    width: r(342px);
                                    color:#444444;
                                    margin-left: r(15px);
                                }
                            }
                            .time{
                                display: flex;
                                justify-content: flex-end;
                                padding-top: r(20px);
                                &>p{
                                    font-size: 12px;
                                    color: #b2b2b2;
                                    margin-bottom: 0;
                                }
                            }
                            .text_menu_a{
                                width: r(495px);
                                height: r(70px);
                                border: r(1px) solid #efefef;
                                margin:r(20px) auto r(8px) auto;
                                resize: none;
                            }
                            .btn_m{
                                height: r(45px);
                                width: 100%;
                                display: flex;
                                justify-content: flex-end;
                                .btn_btn{
                                    height: r(45px);
                                    width: r(174px);
                                    text-align: center;
                                    line-height: r(45px);
                                    font-size: 14px;
                                    color: #fff;
                                    background: #B20000;
                                }
                            }
                            &:last-of-type{
                                border: none;
                            }
                        }
                    }
                }
            }
        }
        .load_wrap{
            width: r(585px);
            height: r(58px);
            text-align: center;
            line-height: r(58px);
            border-top: 1px solid #e6e6e6;
            margin: 0 auto;
            h4{
                font-size: 14px;
                color: #c5c5c5;
            }
        }
    }
}
.article_content_open{
    transform: translateX(0);
}
